<template>
	<div class="poster">
		<list-title :data="header"></list-title>
		<el-form :model="posterForm" :rules="rules" ref="posterForm" label-width="200px">
			<el-form-item label="广告名称" prop="data.name" style="width: 600px;">
				<el-input v-model="posterForm.data.name" placeholder="广告名称"></el-input>
			</el-form-item>
			<el-form-item label="广告位置" prop="data.location" style="width: 600px;">
				<el-input v-model="posterForm.data.location" placeholder="广告位置"></el-input>
			</el-form-item>
			<el-form-item label="预览图" prop="data.preview" style="width: 565px;">
				<!-- <upload :domain="this.$domain.cms" :limit="5" :fileList="posterForm.data.preview" :maxSize="20" 
				:appid="$route.query.appid" 
				:field="'preview'" 
				@insertPic="insertPic" 
				@delPic="delPic">
				</upload> -->
				<upload-oss 
				:stsdomain="this.$domain.ac" 
				:ossdomain="this.$ossdomain" 
				:appid="$route.query.appid" 
				:limit="5" 
				:fileList="posterForm.data.preview" 
				:maxSize="20" 
				@insertFile="insertFile"
				@delFile="delFile">
				</upload-oss>
			</el-form-item>
			<el-form-item label="是否外链" prop="data.outside">
				<el-switch v-model="posterForm.data.outside" @change="chooseOutside"></el-switch>
			</el-form-item>
			<el-form-item label="指定栏目" prop="parentid" v-if="!posterForm.data.outside">
				<el-select v-model="posterForm.parentid" filterable placeholder="请选择栏目" @change="chooseCategory" ref="category">
					<el-option v-for="(item, index) in categoryList" 
					:key="index" 
					:label="item.name" 
					:value="item.catid"
					:data-alias="item.alias">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="链接地址" prop="data.url" style="width: 600px;">
				<el-input v-model="posterForm.data.url" placeholder="链接地址" :disabled="!posterForm.data.outside"></el-input>
				<p class="help">如果是站内链接，系统将自动将自动生成链接</p>
			</el-form-item>
			<el-form-item label="打开方式" prop="data.url_target" style="width: 600px;">
				<el-select v-model="posterForm.data.url_target" placeholder="请选择打开方式">
					<el-option label="self" :value="'1'"></el-option>
					<el-option label="blank" :value="'2'"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="开始展示时间" prop="data.start_time" style="width: 500px;">
				<el-date-picker
				v-model="posterForm.data.start_time"
				format="yyyy-MM-dd HH:mm:ss"
				value-format="yyyy-MM-dd HH:mm:ss"
				type="datetime"
				placeholder="选择日期时间">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="结束展示时间" prop="data.end_time" style="width: 500px;">
				<el-date-picker
				v-model="posterForm.data.end_time"
				format="yyyy-MM-dd HH:mm:ss"
				value-format="yyyy-MM-dd HH:mm:ss"
				type="datetime"
				placeholder="选择日期时间">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="添加时间" prop="data.add_time" style="width: 500px;">
				<el-date-picker
				v-model="posterForm.data.add_time"
				format="yyyy-MM-dd HH:mm:ss"
				value-format="yyyy-MM-dd HH:mm:ss"
				type="datetime"
				placeholder="选择日期时间">
				</el-date-picker>
				<p class="help">为空的话，系统将自动选择当前时间</p>
			</el-form-item>
			<el-form-item label="是否显示" prop="data.display">
				<el-switch v-model="posterForm.data.display"></el-switch>
			</el-form-item>
			
			<el-form-item>
				<el-button type="primary" @click="submitForm('posterForm')" :disabled='posterForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='posterForm.submitLock'></span>
				</el-button>
				<el-button @click="resetForm('posterForm')" v-if='posterForm.data.id==0'>重 置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import UploadOss from "pc/common/UploadOss"
import {changeToBool, changeUploadFormatBack} from "static/js/common.js"

export default {
	inject: ['reload'],
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*当前语言*/
			currlang: '',
			/*头部数据*/
			header: {
				title: '添加广告',
				reload: false,
				buttons: [
					{
						title: '广告列表',
						type: 'primary',
						pathName: 'pc/cms/instance/poster/PosterList',
						query: {
							appid: this.$route.query.appid,
						},
					}
				]
			},
			categoryList: [],
			/*字段数据*/
			posterForm: {
				submitLock: false,
				parentid: '',//选择的栏目ID
				data: {
					id: 0,
					name: '',
					location: '',
					preview: [],
					outside: false,
					url_target: '2',
					url: '',
					start_time: '',
					end_time: '',
					add_time: '',
					display: true,
				}
			},
			rules: {
				data: {
					name: [
						{ required: true, message: '请输入广告名称', trigger: 'blur' },
						{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
					],
					location: [
						{ required: true, message: '请输入广告位置', trigger: 'blur' },
						{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
					],
					url: [
						{ required: true, message: '请输入链接地址', trigger: 'blur' },
						{ min: 2, max: 16, message: '长度在 2 到 500 个字符', trigger: 'blur' }
					],
					start_time: [
						{ required: true, message: '请选择开始时间', trigger: 'blur' },
					],
					end_time: [
						{ required: true, message: '请选择结束时间', trigger: 'blur' },
					],
				}
			}
		};
	},
	components: {
		ListTitle,
		UploadOss
	},
	created: function() {
		/*获取当前语言*/
		let lang = this.$localstorage.get('lang');
		this.currlang = lang?lang:'zh'
		/*取出分类列表*/
		this.getContentCategoryList()
		/*如果是修改，取出旧数据*/
		if(this.$route.query.id){
			this.getPoster(this.$route.query.id)
		}
	},
	methods: {
		/*获取栏目*/
		getContentCategoryList: function(){
			this.$baseURL(this.$domain.cms)
			this.$get(this.$api.contentCategoryList, {
				appid: this.appid,
			}).then(res => {
				// console.log(res);
				if(res.data.code === 0){
					if(res.data.data != undefined){
						this.categoryList = []
						Object.keys(res.data.data).forEach((k) => {
							let indent = '';
							for(var i=1; i<res.data.data[k].level; i++){
								if(i == 1){
									indent += '|---';
								}else{
									indent += '---';
								}
							}
							this.categoryList.push ({
								catid: res.data.data[k].catid,
								name: indent + res.data.data[k].name,
								alias: res.data.data[k].alias
							});
						})
					}
					this.tableLoading = false
				}
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*取出需要修改的数据*/
		getPoster: function(){
			this.header.title = '编辑广告'
			/*取出需要修改的数据*/
			this.posterForm.submitLock = true;
			this.$baseURL(this.$domain.cms)
			this.$get(this.$api.modifyPoster, {
				appid: this.appid,
				'id': this.$route.query.id
			}).then(res => {
				if(res.data.code == 0){
					// console.log(res.data.data)
					this.posterForm.data.id = res.data.data.id
					this.posterForm.data.name = res.data.data.name
					this.posterForm.data.location = res.data.data.location
					this.posterForm.data.preview = changeUploadFormatBack(res.data.data.preview)
					this.posterForm.data.outside = changeToBool(res.data.data.outside)
					this.posterForm.data.url_target = res.data.data.url_target
					this.posterForm.data.url = res.data.data.url
					this.posterForm.data.start_time = res.data.data.start_time
					this.posterForm.data.end_time = res.data.data.end_time
					this.posterForm.data.add_time = res.data.data.add_time
					this.posterForm.data.display = changeToBool(res.data.data.display)
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
				this.posterForm.submitLock = false;
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.posterForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// console.log(this.posterForm.data)
						// return
						this.posterForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addPoster//默认是添加
						if(this.posterForm.data.id > 0){//修改
							apiUrl = this.$api.modifyPoster
						}
						/*添加菜单*/
						this.$baseURL(this.$domain.cms)

						this.posterForm.data.lang = this.currlang

						let data = JSON.parse(JSON.stringify(this.posterForm.data))
						// for(let i=0; i<data.preview.length; i++){
						// 	data.preview[i].url = '/' + data.preview[i].url
						// }

						this.$post(apiUrl, {
							appid: this.appid,
							Poster: data,
						}).then(res => {
							// console.log(res);
							/*成功*/
							if(res.data.code == 0){
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'success'
								});
								if(this.posterForm.data.id > 0){
									this.$router.go(-1)	
								}else{
									this.$refs[formName].resetFields();
								}
							}else{
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'error'
								});
							}
							this.posterForm.submitLock = false;
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*重置表单*/
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		/*是否外链*/
		chooseOutside(val) {
			this.posterForm.parentid = '';
			this.posterForm.data.url = '';
		},
		/*选择栏目*/
		chooseCategory: function(val){
			const rule = this.categoryList.find(item => item.catid === val);
			this.posterForm.data.url = rule.alias;
		},
		/*插入上传的图片*/
		// insertPic(list, field){
		// 	for(let i=0; i<list.length; i++){
		// 		this.posterForm.data[field].push(
		// 			{
		// 				name: '',
		// 				url:  list[i].url
		// 			}
		// 		)
		// 	}
		// },
		/*删除上传的图片*/
		// delPic(index, field){
		// 	this.posterForm.data[field].splice(index, 1)
		// },
		/*插入上传的文件*/
		insertFile(file){
			// console.log(file instanceof Array)
			if(file instanceof Array){//如果是数组的话，说明是图片
				for(let i=0; i<file.length; i++){
					this.posterForm.data.preview.push(
						{
							name: '',
							url:  file[i].url
						}
					)
				}
			}else{//单个文件路径

			}
		},
		/*删除上传的文件*/
		delFile(index){
			if(index >= 0){//图片
				this.posterForm.data.preview.splice(index, 1)
			}else{//文件路径

			}
		},
	},
    computed: {
    	
    }
};
</script>

<style lang="stylus" scoped>
.poster
	form
		margin-top: 10px
</style>